<template>
    <div class="my">
        <div class="my_header">
            <van-image width="80" height="80" round></van-image>
            <div v-if="userInfoStore.userInfo" class="my_info">
                <div class="my_name">{{ userInfoStore.userInfo.username }}</div>
                <van-button @click="logout">退出</van-button>
            </div>
            <div v-else class="login">
                <span @click="login">登录</span>|<span @click="login">注册</span>
            </div>
        </div>
        <van-grid>
            <van-grid-item v-for="item in gridList" :icon="item.icon" :text="item.text" :badge="item.badge" />
        </van-grid>
        <van-cell-group v-for="item in cellList">
            <van-cell v-for="child in item.children" :icon="child.icon" :title="child.title" is-link />
        </van-cell-group>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { showConfirmDialog } from "vant";
import { useRouter } from "vue-router";
import { getUserInfoService } from "@/apis/user";
import { useUserInfoStore } from "@/stores/userInfo";
import { useTokenStore } from "@/stores/token";
const userInfoStore = useUserInfoStore();
const tokenStore = useTokenStore();
const router = useRouter();
const gridList = ref([
    {
        icon: "pending-payment",
        text: "待付款",
    },
    {
        icon: "records-o",
        text: "待收货",
        badge: 7,
    },
    {
        icon: "tosend",
        text: "待评价",
        badge: 40,
    },
    {
        icon: "logistics",
        text: "退换/售后",
        badge: 1,
    },
]);
const cellList = ref([
    {
        children: [
            {
                icon: "records-o",
                title: "全部订单",
            },
        ],
    },
    {
        children: [
            {
                icon: "points",
                title: "我的积分",
            },
            {
                icon: "gold-coin-o",
                title: "我的优惠券",
            },
            {
                icon: "gift-o",
                title: "我的红包",
            },
        ],
    },
]);
const getUserInfo = async () => {
    const res = await getUserInfoService();
    userInfoStore.setUserInfo(res.data);
};
getUserInfo();
const login = () => {
    router.push("/login");
};
const logout = () => {
    showConfirmDialog({
        title: "提示",
        message: "您确定要退出登录吗？",
    })
        .then(() => {
            // on confirm
            tokenStore.removeToken();
            userInfoStore.removeUserInfo();
            router.push("/my");
        })
        .catch(() => {
            // on cancel
        });
};
</script>
<style scoped>
.my_header {
    background: url("/src/assets/icons/user_head_bg.png");
    display: flex;
    align-items: center;
    padding: 15px;
    column-gap: 10px;
    background-size: 100%;
    color: #fff;
}

.van-cell-group {
    margin-bottom: 20px;
}
</style>
